<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../script/react.development.js"></script>
    <script src="../script/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        /*
        -用来创建一个React元素
        -参数
            1.元素的名称(html标签必须小写)
            2.标签中的属性
                -class属性需要className来设置
                -在设置事件时，属性名需要修改为驼峰命名法
            3.元素的内容(子元素)
        */

       //创建一个react元素
       const button = React.createElement('button',{
        id:'btn',
        type:'button',
        className:'hello',
        onClick:()=>{
            alert('别点我')
        }
       },'点我一下')

       //获取根元素
       const root = ReactDOM.createRoot( document.getElementById('root'))

       //将元素在根标签上渲染
       root.render(button)
    </script>
</body>`
</html>